<template>
     <div class="section com-border-bottom">
        <div class="title-box">
            <h2>{{title || '上传图片'}}<span class="font_size" v-if="isRequird == 1"> (必填)</span></h2>
        </div>
        <div class="upload-pic">
            <template v-if="exampleImgThumbUrl.length>0">
                <h3>示例</h3>
                <ul class="pic-list clearfix">
                    <li v-for="img in exampleImgThumbUrl" track-by="$index" >
                        <img :src="img" alt="" @click="picPreview($index,'example')">
                    </li>
                </ul>
                <h3>上传</h3>
            </template>
            <ul class="pic-list">
                <li v-for="item in imgList" track-by="$index">
                    <img :src="item" alt="" @click="picPreview($index)">
                    <span class="btn-delete" v-on:click="removeImageFn($index)"></span>
                </li>
            </ul>
            <div v-show="imgArray.length<5" class="uploader" @click="addImageFn"><div></div></div>
        </div>
    </div>

</template>

<script>
    let imgDomain = 'http://image.doumi.com/'
    /**
     *  引入工具类库 或 Navtive API
     *  example : import widget from 'gapi/widget'
     */
    
    import widget from 'gapi/widget'
    import clientUi from 'gapi/clientUi.js'
    import KCApiApp from 'clientApi/KCApiApp.js'
    import commonPage from 'clientApi/commonPage.js'
    /**
     *  引入Action
     *  example : import { someFunction } from './SomeAction'
     */
    // import { addImage, removeImage } from './ImageviewAction'
    /**
     *  引入Getter
     *  example : import { someFunction } from './SomeGetters'
     */
    // import { getImageArray } from './ImageviewGetters'
    export default {
        computed: {
            imgsLen (){
                return this.getImageArray.length
            },
            imgList(){
                let list = []
                this.imgArray.forEach((item)=>{
                    // if(item.url.indexOf('doumi') > -1){
                    //     list.push(item.url)
                    // }else{
                        list.push(imgDomain+item.url)
                    // }
                    
                })
                return list
            }
        },
        vuex: {
            getters: {
                // getImageArray
            },
            actions: {
                // addImage,
                // removeImage
            }
        },
        props: {
            title: {
                type: String
            },
            imgArray: {
                default: [

                ]
            },
            imgDate:{
                type: Object
            },
            allowAlbum:{
                default: false
            },
            isRequird:{
                default: 0
            },
            exampleImgUrl:{
                default: []
            },
            exampleImgThumbUrl:{
                default: []
            }
        },
        methods: {
            addImageFn (){
                
                
                //判断是否允许选择相册图片
                if(this.allowAlbum){
                    // alert("yunxu")
                    clientUi.selectAndUploadImage((data) => {
                        // console.log(data)
                        if(data&&data.status == 1){
                            this.imgArray.push(data.info[0])
                        }
                    })
                }else{
                    let date = new Date()
                    let year = date.getFullYear()
                    let month = (date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)
                    let day = date.getDate()<10?'0'+date.getDate():date.getDate()
                    let hour = date.getHours()<10?'0'+date.getHours():date.getHours()
                    let minutes = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()
                    this.imgDate.date = year+"-"+month+"-"+day
                    this.imgDate.time = hour+":"+minutes
                    this.imgDate.logo = '灵云'
                    //水印相机
                    commonPage.loadPageStatus('loading')
                    KCApiApp.takePicture(this.imgDate, (data) => {
                        // console.log(data)
                        commonPage.loadPageStatus('loadSuccess')
                        if(data!=0){
                            if(data.error==0){
                                this.imgArray.push(data.info[0])
                            }else{
                                widget.toast('上传图片异常')
                            }
                        }
                    })
                }
                
            },
            removeImageFn (index){
                this.imgArray.splice(index, 1)
            },
            picPreview (index,type){
                if(type === 'example'){
                    clientUi.bigPicturePreview('预览', this.exampleImgUrl, index)
                }else{
                    clientUi.bigPicturePreview('预览', this.imgList, index)
                }
                
            }
        },
        created (){
            
        }
    }

    
</script>
<style>
    .uploader-img{
        display: block;
        width: 100%;
        height: 100%;
    }
    .font_size{
        font-size: 14px;
    }
    div.upload-pic{
        overflow: visible;
    }
</style>
<!-- CSS 样式 -->
<style src="../../static/css/attendance.css"></style>